<template>
    <div>
        <div v-if="loadFlag" class="page-content-text">
            <HeaderLayout :title="$t('netngsTitle')" />

            <div>
                <WifiCommonTab @switchWifiMode="switchWifiMode" :is-show-all-tab="isShowAllTab" :is-show-two-tab="isShowTwoTab" />
            </div>

            <template>
                <!-- 5G -->
                <div v-if="isWifi5">
                    <div v-if="wifiSwitchShow" class="page-content-normal">
                        <div class="flex-row">
                            <div class="bold" style="font-size: 16px">5 GHz {{ $t('commi') }}</div>
                            <div>
                                <el-switch id="wifiSwitch_5G" v-model="wifiSwitchValue_5G" @change="changeWifiStatus" :disabled="wifiSwitchDisabled_5G"> </el-switch>
                            </div>
                        </div>
                    </div>

                    <div v-if="!wifiSettingForm.edit_5G" class="page-content-normal">
                        <hr />

                        <div class="flex-row">
                            <div>
                                <div class="contentTitle_edit">{{ $t('netWxtMobile') }}</div>

                                <div id="wifiName_5G" class="contentValue_16B" style="height: 100%; margin-bottom: 10px">{{ wifiSettingForm.wifiName_5G }}</div>
                            </div>
                            <div>
                                <span v-if="wifiSetting.edit_5G" id="editButton_5G" class="fr-edit" @click="changeEditStatus">{{ $t('comutton') }}</span>
                                <div v-else id="editButton_5G" class="fr-edit-disabled">{{ $t('coButton') }}</div>
                            </div>
                        </div>

                        <template v-if="wifiSettingForm.wifiPasswordShow_5G">
                            <hr />
                            <div class="flex-row">
                                <div>
                                    <div class="contentTitle_edit">{{ $t('netWork.wiwordTextMobile') }}</div>
                                    <div v-if="passwordVisibleFlag" id="wifiPassword_5G" class="contentValue_16B" style="height: 100%">{{ wifiSettingForm.wifiPassword_5G }}</div>
                                    <div v-else id="wifiPassword_5G" class="contentValue_16B">********</div>
                                </div>

                                <div>
                                    <div v-if="passwordVisibleFlag" id="passwordIcon" class="my-eye-reveal" @click="changePWDisplayStatus()"></div>
                                    <div v-else id="passwordIcon" class="my-eye-hide" @click="changePWDisplayStatus()"></div>
                                </div>
                            </div>
                        </template>

                        <hr style="margin-top: 20px" />
                        <div class="row">
                            <div class="contentTitle_edit">{{ $t('nettingTextMobile') }}</div>
                            <div id="securityType_5G" class="contentValue_16B">{{ wifiSettingForm.securityTypeLabel_5G }}</div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="contentTitle_edit">{{ $t('netthTextMobile') }}</div>
                            <div id="channelWidth_5G" class="contentValue_16B">{{ getChannelWidthLabel(wifiSettingForm.channelWidthOptions_5G, wifiSettingForm.channelWidthValue_5G) }}</div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="contentTitle_edit">{{ $t('netnelTextMobile') }}</div>
                            <div id="wifiChannel_5G" class="contentValue_16B">{{ wifiSettingForm.wifiChannelLabel_5G }}</div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="contentTitle_edit">{{ $t('netWMobile') }}</div>
                            <div id="broadcast_5G" class="contentValue_16B">{{ wifiSettingForm.broadcastLabel_5G }}</div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="contentTitle_edit">{{ $t('netWon_label') }}</div>
                            <div id="maxWiFiConnections" class="contentValue_16B">{{ wifiSettingForm.maxsta_5G }}</div>
                        </div>
                        <hr />
                    </div>
                    <div v-else class="page-content-edit">
                        <el-form ref="wifiSettingForm" :model="wifiSettingForm" :rules="wifiSettingRules">
                            <div class="contentTitle_edit"><star />{{ $t('nettMbile') }}</div>
                            <el-form-item prop="wifiName_5G">
                                <el-input :maxlength="wifiNameLength_5G" id="wifiName_edit_5G" v-model.trim="wifiSettingForm.wifiName_5G" placeholder="" clearable ref="wifiName" :disabled="bandSteeringSwitchValue">
                                    <span slot="suffix" style="color: #c6c8ce; line-height: 52px"> {{ wifiNameBytes_5G }} / 32 </span>
                                </el-input>
                            </el-form-item>

                            <div v-if="wifiSettingForm.wifiPasswordShow_5G">
                                <div class="contentTitle_edit"><star />{{ $t('netWextMobile') }}</div>
                                <el-form-item prop="wifiPassword_5G">
                                    <el-input id="wifiPassword_edit_5G" maxlength="63" :type="passwordVisible" v-model.trim="wifiSettingForm.wifiPassword_5G" placeholder="" ref="wifiPassword" :disabled="bandSteeringSwitchValue">
                                        <i id="passwordIcon" slot="suffix" :class="icon" @click="showPass"></i>
                                    </el-input>
                                </el-form-item>
                            </div>

                            <div class="contentTitle_edit"><star />{{ $t('netWTextMobile') }}</div>
                            <el-select id="securityType_edit_5G" v-model="wifiSettingForm.securityTypeValue_5G" placeholder="" :disabled="bandSteeringSwitchValue" @change="changeSecurityType">
                                <div id="securityType_select_5G">
                                    <el-option v-for="item in wifiSettingForm.securityTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </div>
                            </el-select>

                            <div class="contentTitle_edit"><star />{{ $t('netWTextMobile') }}</div>
                            <el-select id="channelWidth_edit_5G" v-model="wifiSettingForm.channelWidthValue_5G" placeholder="">
                                <div id="channelWidth_select_5G">
                                    <el-option v-for="item in wifiSettingForm.channelWidthOptions_5G" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </div>
                            </el-select>

                            <div class="contentTitle_edit"><star />{{ $t('netWobile') }}</div>
                            <el-select id="wifiChannel_edit_5G" v-model="wifiSettingForm.wifiChannelValue_5G" placeholder="">
                                <div id="wifiChannel_select_5G">
                                    <el-option v-for="item in wifiSettingForm.wifiChannelOptions_5G" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </div>
                            </el-select>

                            <div class="contentTitle_edit"><star />{{ $t('netWastTextMobile') }}</div>
                            <el-select id="broadcast_edit_5G" v-model="wifiSettingForm.broadcastValue_5G" placeholder="">
                                <div id="broadcast_select_5G">
                                    <el-option v-for="item in wifiSettingForm.broadcastOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </div>
                            </el-select>
                            <div class="contentTitle_edit"><star />{{ $t('netWo_label') }}</div>
                            <el-select id="maxWiFiConnections_edit_5G" v-model="wifiSettingForm.maxsta_5G" placeholder="">
                                <div id="maxWiFiConnections_edit_5G">
                                    <el-option v-for="item in wifiSettingForm.maxstaOptions_5g" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </div>
                            </el-select>

                            <div style="height: 30px; line-height: 30px"></div>
                            <el-form-item>
                                <el-button id="saveButton_5G" type="primary" round @click="checkBeforeSave">{{ $t('comtton') }}</el-button>
                                <el-button id="cancelButton_5G" type="info" @click="onCancel">{{ $t('comcelButton') }}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <!-- 6G -->
                <div v-else-if="isWifi6">
                    <div v-if="wifiSwitchShow" class="page-content-normal">
                        <div class="flex-row">
                            <div class="bold" style="font-size: 16px">6 GHz {{ $t('cFi') }}</div>
                            <div>
                                <el-switch id="wifiSwitch" v-model="wifiSwitchValue_6G" @change="changeWifiStatus" :disabled="wifiConfig_6G.wifiSwitchDisabled"> </el-switch>
                            </div>
                        </div>
                    </div>

                    <template>
                        <div class="page-content-normal" v-show="!wifiConfig_6G.edit">
                            <hr />

                            <div class="flex-row">
                                <div>
                                    <div class="contentTitle_edit">{{ $t('netMobile') }}</div>
                                    <div id="wifiName" class="contentValue_16B" style="height: 100%; margin-bottom: 10px">{{ wifiConfig_6G.wifiName }}</div>
                                </div>
                                <div>
                                    <span class="fr-edit" v-show="!wifiConfig_6G.edit" id="editButton" @click="changeEditStatus">{{ $t('comutton') }}</span>
                                    <span v-show="wifiConfig_6G.edit" id="editButton_NO" class="fr-edit-disabled">{{ $t('comtton') }}</span>
                                </div>
                            </div>

                            <hr />

                            <div class="flex-row">
                                <div>
                                    <div class="contentTitle_edit">{{ $t('netxtMobile') }}</div>
                                    <div style="height: 100%" v-show="passwordVisibleFlag" id="wifiPassword" class="contentValue_16B">{{ wifiConfig_6G.wifiPassword }}</div>
                                    <div style="height: 100%" v-show="!passwordVisibleFlag" id="wifiPassword" class="contentValue_16B">********</div>
                                </div>

                                <div>
                                    <div v-show="passwordVisibleFlag" id="passwordIcon" class="my-eye-reveal" @click="changePWDisplayStatus"></div>
                                    <div v-show="!passwordVisibleFlag" id="passwordIcon" class="my-eye-hide" @click="changePWDisplayStatus"></div>
                                </div>
                            </div>

                            <hr style="margin-top: 20px" />
                            <div class="row">
                                <div class="contentTitle_edit">{{ $t('netWingTextMobile') }}</div>
                                <div id="securityType" class="contentValue_16B">{{ formatSelectLabel(wifiConfig_6G.securityTypeOptions, wifiConfig_6G.securityTypeValue) }}</div>
                            </div>
                            <hr />
                            <div class="row">
                                <div class="contentTitle_edit">{{ $t('nethTextMobile') }}</div>
                                <div id="channelWidth" class="contentValue_16B">{{ getChannelWidthLabel(wifiConfig_6G.channelWidthOptions, wifiConfig_6G.channelWidthValue) }}</div>
                            </div>
                            <hr />
                            <div class="row">
                                <div class="contentTitle_edit">{{ $t('netWTextMobile') }}</div>
                                <div id="wifiChannel" class="contentValue_16B">{{ wifiConfig_6G.wifiChannelLabel }}</div>
                            </div>
                            <hr />
                            <div class="row">
                                <div class="contentTitle_edit">{{ $t('netWextMobile') }}</div>
                                <div id="broadcast" class="contentValue_16B">{{ formatSelectLabel(wifiSettingForm.broadcastOptions, wifiConfig_6G.broadcastValue) }}</div>
                            </div>

                            <div v-if="false">
                                <hr />
                                <div class="row">
                                    <div class="contentTitle_edit">{{ $t('netonTextMobile') }}</div>
                                    <div id="wpsConnection" class="contentValue_16B">{{ formatSelectLabel(wifiSettingForm.wpsConnectionOptions, wifiConfig_6G.wpsConnectionValue) }}</div>
                                </div>
                            </div>

                            <hr />
                            <div class="row">
                                <div class="contentTitle_edit">{{ $t('netWTextMobile') }}</div>
                                <div id="beamforming" class="contentValue_16B">{{ formatSelectLabel(wifiSettingForm.beamformingOptions, wifiConfig_6G.beamformingValue) }}</div>
                            </div>
                            <hr />
                        </div>

                        <div class="page-content-edit" v-show="wifiConfig_6G.edit">
                            <el-form ref="wifiSettingForm" :model="wifiConfig_6G" :rules="wifiSettingRules">
                                <div class="contentTitle_edit"><star />{{ $t('netMobile') }}</div>
                                <el-form-item prop="wifiName">
                                    <el-input :maxlength="wifiNameLength" id="wifiName_edit" v-model.trim="wifiConfig_6G.wifiName" placeholder="" clearable ref="wifiName" :disabled="bandSteeringSwitchValue">
                                        <span slot="suffix" style="color: #c6c8ce; line-height: 52px"> {{ wifiNameBytes_6G }} / 32 </span>
                                    </el-input>
                                </el-form-item>

                                <div>
                                    <div class="contentTitle_edit"><star />{{ $t('netWswordTextMobile') }}</div>
                                    <el-form-item prop="wifiPassword">
                                        <el-input id="wifiPassword_edit" maxlength="63" :type="passwordVisible" v-model.trim="wifiConfig_6G.wifiPassword" placeholder="" ref="wifiPassword" :disabled="bandSteeringSwitchValue">
                                            <i id="passwordIcon" slot="suffix" :class="icon" @click="showPass"></i>
                                        </el-input>
                                    </el-form-item>
                                </div>

                                <div class="contentTitle_edit"><star />{{ $t('nettingTextMobile') }}</div>
                                <el-select id="securityType_edit" v-model="wifiConfig_6G.securityTypeValue" placeholder="" @change="changeSecurityType" :disabled="bandSteeringSwitchValue">
                                    <div id="securityType_select">
                                        <el-option v-for="item in wifiConfig_6G.securityTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                    </div>
                                </el-select>

                                <div class="contentTitle_edit"><star />{{ $t('netxtMobile') }}</div>
                                <el-select id="channelWidth_edit" v-model="wifiConfig_6G.channelWidthValue" placeholder="">
                                    <div id="channelWidth_select">
                                        <el-option v-for="item in wifiConfig_6G.channelWidthOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                    </div>
                                </el-select>

                                <div class="contentTitle_edit"><star />{{ $t('netWorTextMobile') }}</div>
                                <el-select id="wifiChannel_edit" v-model="wifiConfig_6G.wifiChannelValue" placeholder="">
                                    <div id="wifiChannel_select">
                                        <el-option v-for="item in wifiConfig_6G.wifiChannelOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                    </div>
                                </el-select>

                                <div class="contentTitle_edit"><star />{{ $t('netTextMobile') }}</div>
                                <el-select id="broadcast_edit" v-model="wifiConfig_6G.broadcastValue" placeholder="">
                                    <div id="broadcast_select">
                                        <el-option v-for="item in wifiSettingForm.broadcastOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                    </div>
                                </el-select>

                                <div style="height: 30px; line-height: 30px"></div>
                                <el-form-item>
                                    <el-button id="saveButton" type="primary" round @click="checkBeforeSave">{{ $t('commutton') }}</el-button>
                                    <el-button id="cancelButton" type="info" @click="onCancel">{{ $t('comtton') }}</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                </div>

                <!-- 2.4G-->
                <div v-else>
                    <div class="page-content-normal" v-if="wifiSwitchShow">
                        <div class="flex-row">
                            <div class="bold" style="font-size: 16px">2.4 GHz {{ $t('commFi') }}</div>
                            <div >
                                <el-switch id="wifiSwitch" v-model="wifiSwitchValue" @change="changeWifiStatus" :disabled="wifiSwitchDisabled"> </el-switch>
                            </div>
                        </div>
                    </div>

                    <div v-if="!wifiSettingForm.edit" class="page-content-normal">
                        <hr />

                        <div class="flex-row">
                            <div>
                                <div class="contentTitle_edit">{{ $t('netWMobile') }}</div>

                                <div id="wifiName" class="contentValue_16B" style="height: 100%; margin-bottom: 10px">{{ wifiSettingForm.wifiName }}</div>
                            </div>
                            <div>
                                <span v-if="wifiSetting.edit" id="editButton" class="fr-edit" @click="changeEditStatus">{{ $t('comton') }}</span>
                                <div v-else id="editButton" class="fr-edit-disabled">{{ $t('coton') }}</div>
                            </div>
                        </div>

                        <template v-if="wifiSettingForm.wifiPasswordShow">
                            <hr />
                            <div class="flex-row">
                                <div>
                                    <div class="contentTitle_edit">{{ $t('netTextMobile') }}</div>
                                    <div v-if="passwordVisibleFlag" id="wifiPassword" class="contentValue_16B" style="height: 100%">{{ wifiSettingForm.wifiPassword }}</div>
                                    <div v-if="!passwordVisibleFlag" id="wifiPassword" class="contentValue_16B">********</div>
                                </div>
                                <div>
                                    <div v-if="!passwordVisibleFlag" id="passwordIcon" class="my-eye-hide" @click="changePWDisplayStatus()"></div>
                                    <div v-if="passwordVisibleFlag" id="passwordIcon" class="my-eye-reveal" @click="changePWDisplayStatus()"></div>
                                </div>
                            </div>
                        </template>

                        <hr style="margin-top: 20px" />
                        <div class="row">
                            <div class="contentTitle_edit">{{ $t('netWobile') }}</div>
                            <div id="securityType" class="contentValue_16B">{{ wifiSettingForm.securityTypeLabel }}</div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="contentTitle_edit">{{ $t('netxtMobile') }}</div>
                            <div id="channelWidth" class="contentValue_16B">{{ getChannelWidthLabel(wifiSettingForm.channelWidthOptions, wifiSettingForm.channelWidthValue) }}</div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="contentTitle_edit">{{ $t('netnnelTextMobile') }}</div>
                            <div id="wifiChannel" class="contentValue_16B">{{ wifiSettingForm.wifiChannelLabel }}</div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="contentTitle_edit">{{ $t('netWextMobile') }}</div>
                            <div id="broadcast" class="contentValue_16B">{{ wifiSettingForm.broadcastLabel }}</div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="contentTitle_edit">{{ $t('netWtion_label') }}</div>
                            <div id="maxWiFiConnections" class="contentValue_16B">{{ wifiSettingForm.maxsta }}</div>
                        </div>
                        <hr />
                    </div>
                    <div v-else class="page-content-edit">
                        <el-form ref="wifiSettingForm" :model="wifiSettingForm" :rules="wifiSettingRules">
                            <div class="contentTitle_edit"><star />{{ $t('netextMobile') }}</div>
                            <el-form-item prop="wifiName">
                                <el-input :maxlength="wifiNameLength" id="wifiName_edit" v-model.trim="wifiSettingForm.wifiName" placeholder="" clearable ref="wifiName">
                                    <span slot="suffix" style="color: #c6c8ce; line-height: 52px"> {{ wifiNameBytes }} / 32 </span>
                                </el-input>
                            </el-form-item>

                            <div v-if="wifiSettingForm.wifiPasswordShow">
                                <div class="contentTitle_edit"><star />{{ $t('netWxtMobile') }}</div>
                                <el-form-item prop="wifiPassword">
                                    <el-input id="wifiPassword_edit" maxlength="63" :type="passwordVisible" v-model.trim="wifiSettingForm.wifiPassword" placeholder="" ref="wifiPassword">
                                        <i id="passwordIcon" slot="suffix" :class="icon" @click="showPass"></i>
                                    </el-input>
                                </el-form-item>
                            </div>

                            <div class="contentTitle_edit"><star />{{ $t('netextMobile') }}</div>
                            <el-select id="securityType_edit" v-model="wifiSettingForm.securityTypeValue" placeholder="" @change="changeSecurityType">
                                <div id="securityType_select">
                                    <el-option v-for="item in wifiSettingForm.securityTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </div>
                            </el-select>

                            <div class="contentTitle_edit"><star />{{ $t('netTextMobile') }}</div>
                            <el-select id="channelWidth_edit" v-model="wifiSettingForm.channelWidthValue" placeholder="">
                                <div id="channelWidth_select">
                                    <el-option v-for="item in wifiSettingForm.channelWidthOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </div>
                            </el-select>

                            <div class="contentTitle_edit"><star />{{ $t('netWTextMobile') }}</div>
                            <el-select id="wifiChannel_edit" v-model="wifiSettingForm.wifiChannelValue" placeholder="">
                                <div id="wifiChannel_select">
                                    <el-option v-for="item in wifiSettingForm.wifiChannelOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </div>
                            </el-select>

                            <div class="contentTitle_edit"><star />{{ $t('netMobile') }}</div>
                            <el-select id="broadcast_edit" v-model="wifiSettingForm.broadcastValue" placeholder="">
                                <div id="broadcast_select">
                                    <el-option v-for="item in wifiSettingForm.broadcastOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </div>
                            </el-select>

                            <div class="contentTitle_edit"><star />{{ $t('nen_label') }}</div>
                            <el-select id="maxWiFiConnections_edit" v-model="wifiSettingForm.maxsta" placeholder="">
                                <div id="maxWiFiConnections_edit">
                                    <el-option v-for="item in wifiSettingForm.maxstaOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </div>
                            </el-select>

                            <div style="height: 30px; line-height: 30px"></div>
                            <el-form-item>
                                <el-button id="saveButton" type="primary" round @click="checkBeforeSave">{{ $t('coButton') }}</el-button>
                                <el-button id="cancelButton" type="info" @click="onCancel">{{ $t('cotton') }}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </template>

        </div>

        <!-- dialog start -->

        <confirmDialog ref="closeWifiRef" :title="$t('netWork.wifiSettings.wifi_popUp_label01')" @confirm="setWifiStatus" @countdownEnd="init" @cancel="init">
            <span>{{ $t('netWork.wifiSettings.wifi_popUp_label02') }}</span>
        </confirmDialog>

        <confirmDialog ref="openWifiRef" :title="$t('netWork.wifiSettings.wifi_popUp_label10')" @confirm="setWifiStatus" @countdownEnd="init" @cancel="init">
            <span>{{ $t('netWork.wifiSettings.wifi_popUp_label11') }}</span>
        </confirmDialog>

        <!-- 关闭wifi总开关 -->
        <confirmDialog ref="closeWifiMainRef" :title="$t('netWork.wifiSettings.wifi_popUp_label01')" @confirm="setWifiMainSwitch" @countdownEnd="init" @cancel="init">
            <span>{{ $t('netWork.wifiSettings.wifi_popUp_label02') }}</span>
        </confirmDialog>

        <!-- 开启wifi总开关 -->
        <confirmDialog ref="openWifiMainRef" :title="$t('netWork.wifiSettings.wifi_popUp_label10')" @confirm="setWifiMainSwitch" @countdownEnd="init" @cancel="init">
            <span>{{ $t('netWork.wifiSettings.wifi_popUp_label11') }}</span>
        </confirmDialog>

        <confirmDialog ref="saveDialogRef" :title="$t('netWork.wifiSettings.ChangeConfirmTitle')" :confirmText="$t('common.changeButton')" @confirm="onWifiSettingSubmit" @countdownEnd="init" @cancel="onCancel">
            <span>{{ $t('netWork.wifiSettings.ChangeConfirmConcept') }}</span>
        </confirmDialog>

    </div>
</template>

<script>
import WifiCommonTab from '@/views/netWork/wifiSettings/components/WifiCommonTab';

import commonWifiMixin from '@/views/netWork/wifiSettings/mixins/commonWifiMixin';

import { wifiModeDict } from '@/constant/dict';
import { mapActions, mapState } from 'vuex';
import { setWifiConfig, setWifiSwitch,getInfoWireless} from '@/api/wireless';
import { getMacRules } from '@/api/security';
import { max } from 'lodash-es';


export default {
    components: { WifiCommonTab},
    mixins: [commonWifiMixin],
    data() {
        return {
            wifiSettingForm: {
                edit: false,
                edit_5G: false,
                wifiName: '',
                wifiName_5G: '',
                wifiPassword: '',
                wifiPassword_5G: '',
                wifiPasswordShow: true,
                wifiPasswordShow_5G: true,
                securityTypeOptions: [],
                securityTypeValue: '',
                securityTypeLabel: '',
                securityTypeValue_5G: '',
                securityTypeLabel_5G: '',
                channelWidthOptions: [
                    {
                        value: '20M',
                        label: '20M'
                    },
                    {
                        value: '40M',
                        label: '20/40M'
                    }
                ],
                channelWidthOptions_5G: [
                    {
                        value: '20M',
                        label: '20M'
                    },
                    {
                        value: '40M',
                        label: '20/40M'
                    },
                    {
                        value: '80M',
                        label: '20/40/80M'
                    },
                    {
                        value: '160M',
                        label: '20/40/80/160M'
                    }
                ],
                channelWidthValue: '',
                channelWidthValue_5G: '',
                wifiChannelOptions: [],
                wifiChannelOptions_5G: [],
                wifiChannelValue: '',
                wifiChannelLabel: '',
                wifiChannelValue_5G: '',
                wifiChannelLabel_5G: '',
                broadcastOptions: [
                    {
                        value: '0',
                        label: this.$t('common.onLabel')
                    },
                    {
                        value: '1',
                        label: this.$t('common.offLabel')
                    }
                ],
                broadcastValue: '',
                broadcastLabel: '',
                broadcastValue_5G: '',
                broadcastLabel_5G: '',
                
                autoWifiChannel: '',
                autoWifiChannel_5G: '',

                maxlink: 16,
                maxsta: 8,
                maxstaOptions:[],
                maxlink_5G: 16,
                maxsta_5G: 8,
                maxstaOptions_5G:[],
            },
            wifiConfig_6G: {
                edit: false,
                wifiSwitchDisabled: false,
                wifiName: '',
                wifiPassword: '',
                wifiPasswordShow: true,
                securityTypeValue: '',
                channelWidthValue: '',
                wifiChannelLabel: '',
                wifiChannelValue: '',
                broadcastValue: '',
                beamformingValue: '',
                securityTypeOptions: [],
                wifiChannelOptions: [],
                channelWidthOptions: [],
                autoWifiChannel: ''
            },
            bandSteeringSwitchValue: false,
            bandSteeringSwitchDisabled: false,
            wifiSwitchDisabled: false,
            wifiSwitchDisabled_5G: false,
            wifiSetting: {
                edit: true,
                edit_5G: true
            },
            wifiSettingsInfo: [],
            isMaxUsersBtnShow: true,
            macRestrictMode: '',
            macRestrictMode_5G: '',
            wifiSwitchShow: true,
            loadFlag: false,
            fetchChannel: {},
            fetchChannel5G: {},
            fetchChannel6G: {},
            showPower: false,
            maxUserNumber: 8,
            wiFiBakData: {
                wifiName_bs: '',
                wifiPwd_bs: '',
                encryption_bs: '',
                wifiName2_4: '',
                wifiPwd2_4: '',
                encryption2_4: '',
                wifiName5: '',
                wifiPwd5: '',
                encryption5: ''
            },
            needWiFiBakData: false,
            wifiMainSwitch: false,
            bleAndWifiNode: '0',
            WIFI_24G_CHANNEL_SKIP: '1'
        };
    },
    created() {
        this.init();
    },
    computed: {
        ...mapState('firmware', {
            dualStatus: (state) => state.dualStatus
        }),

        // 只支持单频 WIFI24
        onlySupport24() {
            return false;
        },
        
        getWifiAllSwitch() {
            return this.wifiSwitchValue || this.wifiSwitchValue_5G;
        },

        getBandSteeringText() {
            return this.isShowAllTab ? this.$t('netWork.wifiSettings.TriBandWifiConsolidation') : this.$t('netWork.wifiSettings.WifiBandSteering_Label');
        },

        getBandSteeringDialogTitle() {
            if (this.bandSteeringSwitchValue) {
                return `${this.$t('common.enableLable')} ${this.getBandSteeringText}`;
            } else {
                return `${this.$t('common.disableLable')} ${this.getBandSteeringText}`;
            }
        },

        getBandSteeringDialogContent() {
            if (this.bandSteeringSwitchValue) {
                return this.isShowAllTab ? this.$t('netWork.wifiSettings.turnonTriBandTips') : this.$t('netWork.wifiSettings.wifi_popUp_bs_turnon_label');
            } else {
                return this.isShowAllTab ? this.$t('netWork.wifiSettings.turnoffTriBandTips') : this.$t('netWork.wifiSettings.wifi_popUp_bs_turnoff_label');
            }
        }
    },
    watch: {
        'wifiSettingForm.channelWidthValue': {
            handler(nVal) {
                if (nVal) {
                    this.channelDataHandle(nVal, this.fetchChannel);
                }
            }
        },

        'wifiSettingForm.channelWidthValue_5G': {
            handler(nVal) {
                if (nVal) {
                    this.channelDataHandle(nVal, this.fetchChannel5G, wifiModeDict.WIFI5);
                }
            }
        },

        'wifiConfig_6G.channelWidthValue': {
            handler(nVal) {
                if (nVal) {
                    this.channelDataHandle(nVal, this.fetchChannel6G, wifiModeDict.WIFI6);
                }
            }
        }
    },
    methods: {
        ...mapActions('firmware', ['DUALSTATUS']),

        /**
         * @description 获取信道宽度options
         * @param {*} arr WiFi信道数据
         */
        getChannelWidthOptions(arr, wifiMode) {
            try {
                let newArray = [];
                for (let i = 0; i < arr.length; i++) {
                    const item = arr[i];
                    newArray.push({
                        label: item.bandwidth + "M",
                        value: item.bandwidth
                    });
                }
                if (wifiMode === this.wifiModeDict.WIFI24) {
                    this.wifiSettingForm.channelWidthOptions = newArray;
                }
                if (wifiMode === this.wifiModeDict.WIFI5) {
                    this.wifiSettingForm.channelWidthOptions_5G = newArray;
                }
                if (wifiMode === this.wifiModeDict.WIFI6) {
                    this.wifiConfig_6G.channelWidthOptions = newArray;
                }
                console.log('newArray', newArray);
            } catch (error) {
                return error;
            }
        },

        /**
         * @description 获取信道下拉列表
         * @param {*} fetchChannel
         * @param {*} channelWidth
         */
        getChannelOptions(fetchChannel, channelWidth) {
            try {
                console.log("getChannelOptions",fetchChannel,channelWidth);
                if (fetchChannel) {
                    let channelArr
                    for (let i = 0; i < fetchChannel.length; i++) {
                        let item = fetchChannel[i];
                        if (item.bandwidth === channelWidth) {
                            channelArr = item.channels.split(',');
                            break;
                        }
                    }
                    const channelOptions = channelArr.map((item) => {
                        return {
                            value: parseInt(item),
                            label: isNaN(Number(item.replace(/\s/g, ''))) ? this.$t('netWork.wifiSettings.' + item.replace(/\s/g, '')) : item
                        };
                    });

                    channelOptions.unshift({
                        value: 0,
                        label: this.$t('netWork.wifiSettings.item_wifi_auto_ch_2g_0')
                    });
                    console.log("channelOptions",channelOptions);
                    return channelOptions;
                }
            } catch (error) {
                return [];
            }
        },

        /**
         * 信道数据处理
         * @param {string} channelWidth 频宽
         * @param {Object} fetchChannel 返回的信道列表
         * @param {string} wifi WIFI类型
         */
        channelDataHandle(channelWidth, fetchChannel, wifi = this.wifiModeDict.WIFI24) {
            const channelOptions = this.getChannelOptions(fetchChannel, channelWidth);
            console.log("channelOptions",channelOptions);
            if (channelOptions) {
                let map = channelOptions.reduce((map, obj) => {
                    map.set(obj.value, obj.label);
                    return map;
                }, new Map());

                console.log("map",map);

                if (wifi == this.wifiModeDict.WIFI5) {
                    this.wifiSettingForm.wifiChannelOptions_5G = channelOptions;
                    if (!map.has(this.wifiSettingForm.wifiChannelValue_5G)) this.wifiSettingForm.wifiChannelValue_5G = 0;
                    if (this.wifiSettingForm.wifiChannelValue_5G === 0 && +this.wifiSettingForm.autoWifiChannel_5G > 0) {
                        this.wifiSettingForm.wifiChannelLabel_5G = map.get(this.wifiSettingForm.wifiChannelValue_5G) + ` (${this.wifiSettingForm.autoWifiChannel_5G}) `;
                    } else {
                        this.wifiSettingForm.wifiChannelLabel_5G = map.get(this.wifiSettingForm.wifiChannelValue_5G);
                    }
                    return;
                }

                if (wifi === this.wifiModeDict.WIFI6) {
                    this.wifiConfig_6G.wifiChannelOptions = channelOptions;
                    if (!map.has(String(this.wifiConfig_6G.wifiChannelValue))) this.wifiConfig_6G.wifiChannelValue = 0;
                    if (this.wifiConfig_6G.wifiChannelValue === '0' && +this.wifiConfig_6G.autoWifiChannel > 0) {
                        this.wifiConfig_6G.wifiChannelLabel = map.get(String(this.wifiConfig_6G.wifiChannelValue)) + ` (${this.wifiConfig_6G.autoWifiChannel}) `;
                    } else {
                        this.wifiConfig_6G.wifiChannelLabel = map.get(String(this.wifiConfig_6G.wifiChannelValue));
                    }
                    return;
                }

                if (!map.has(this.wifiSettingForm.wifiChannelValue)) this.wifiSettingForm.wifiChannelValue = 0;
                this.wifiSettingForm.wifiChannelOptions = channelOptions;
                if (this.wifiSettingForm.wifiChannelValue === 0 && +this.wifiSettingForm.autoWifiChannel > 0) {
                    this.wifiSettingForm.wifiChannelLabel = map.get(this.wifiSettingForm.wifiChannelValue) + ` (${this.wifiSettingForm.autoWifiChannel}) `;
                } else {
                    this.wifiSettingForm.wifiChannelLabel = map.get(this.wifiSettingForm.wifiChannelValue);
                }
            }
        },

        // change wifi main status
        changeWifiMain() {
            if (this.wifiMainSwitch) {
                this.$refs.openWifiMainRef.show();
            } else {
                this.$refs.closeWifiMainRef.show();
            }
        },

        /**
         * 修改Wifi总开关
         */
        async setWifiMainSwitch() {
            console.log('setWifiMainSwitch');
            const num = ['module_wifi_enable', 'module_wifi5g_enable'];

            const val = this.wifiMainSwitch ? ['1', '1'] : ['0', '0'];
        },

        /**
         * @description modify WIFI Status
         */
        async setWifiStatus() {
            const params = {
                enable: this.isWifi5 ? this.wifiSwitchValue_5G : this.isWifi6 ? this.wifiSwitchValue_6G : this.wifiSwitchValue,
                band: this.isWifi5 ? '5' : 
                    this.isWifi6 ? '6' : '24'
            };
            try {
                console.log('setWifiStatus', params);
                await setWifiSwitch(params);
                this.$message.success(this.$t('common.success'));
            } catch (error) {
                console.log('setWifiStatus error:', error);
                this.$message.error(this.$t('common.error'));
            }
            this.$refs.closeWifiRef.hide();
            this.onCancel();
        },

        /**
         * @description submit form
         */
        async onWifiSettingSubmit() {

            // 准备请求参数
            let params = {};
            
            if (this.isWifi5) {
                params = {
                    band: '5G',
                    ssid: this.wifiSettingForm.wifiName_5G,
                    encryption: this.wifiSettingForm.securityTypeValue_5G,
                    password: this.wifiSettingForm.securityTypeValue_5G !== 'none' ? this.wifiSettingForm.wifiPassword_5G : '',
                    channelWidth: this.wifiSettingForm.channelWidthValue_5G,
                    channel: this.wifiSettingForm.wifiChannelValue_5G,
                    broadcast: this.wifiSettingForm.broadcastValue_5G,
                    maxsta: this.wifiSettingForm.maxsta_5G,
                };
            } else if (this.isWifi6) {
                params = {
                    band: '6G',
                    ssid: this.wifiConfig_6G.wifiName,
                    encryption: this.wifiConfig_6G.securityTypeValue,
                    password: this.wifiConfig_6G.securityTypeValue !== 'none' ? this.wifiConfig_6G.wifiPassword : '',
                    channelWidth: this.wifiConfig_6G.channelWidthValue,
                    channel: this.wifiConfig_6G.wifiChannelValue,
                    broadcast: this.wifiConfig_6G.broadcastValue,
                };
            } else {
                params = {
                    band: '2.4G',
                    ssid: this.wifiSettingForm.wifiName,
                    encryption: this.wifiSettingForm.securityTypeValue,
                    password: this.wifiSettingForm.securityTypeValue !== 'none' ? this.wifiSettingForm.wifiPassword : '',
                    channelWidth: this.wifiSettingForm.channelWidthValue,
                    channel: this.wifiSettingForm.wifiChannelValue,
                    broadcast: this.wifiSettingForm.broadcastValue,
                    maxsta: this.wifiSettingForm.maxsta,
                };
            }

            // 调用API接口提交数据
            try {
                await setWifiConfig(params);
                this.$message.success(this.$t('common.success'));
                // 更新本地状态
                if (this.isWifi5) {
                    this.wifiSettingForm.edit_5G = false;
                } else if (this.isWifi6) {
                    this.wifiConfig_6G.edit = false;
                } else {
                    this.wifiSettingForm.edit = false;
                }
            }catch (error) {
                console.log(error);
                this.$message.error(this.$t('common.error'));
            }

            this.onCancel();
        },

        /**
         * get WIFI 24g config
         */
        async fetchWifi_24g() {
            try {
                const res = await getInfoWireless('24');
                console.log("getWifiConfig:",res);

                // 获取auto WIFI信道值
                if (res.current_channel) {
                    this.wifiSettingForm.autoWifiChannel = res.current_channel;
                }

                // 获取 WIFI 开关
                this.wifiSwitchValue = res.enable;

                // 获取 WIFI 名称和密码
                this.wifiSettingForm.wifiName = res.ssid;
                this.wifiSettingForm.wifiPassword = res.key;

                // 获取 Security Type 安全协议类型
                this.wifiSettingForm.securityTypeValue = res.encryption;
                if (this.wifiSettingForm.securityTypeValue == 'none') {
                    this.wifiSettingForm.wifiPasswordShow = false;
                }

                // 获取安全类型对应表
                this.wifiSettingForm.securityTypeOptions = res.encryption_list;

                // 获取 Security Type 安全协议类型的 Label
                for (let k = 0; k < this.wifiSettingForm.securityTypeOptions.length; k++) {
                    if (this.wifiSettingForm.securityTypeValue == this.wifiSettingForm.securityTypeOptions[k].value) {
                        this.wifiSettingForm.securityTypeLabel = this.wifiSettingForm.securityTypeOptions[k].label;
                        break;
                    }
                }

                // 获取 Channel Width Value
                this.wifiSettingForm.channelWidthValue = res.bandwidth;

                // 获取 WIFI Channel 的值
                this.wifiSettingForm.wifiChannelValue = res.channel;

                // 获取 Broadcast Value 广播值： 0 or 1
                this.wifiSettingForm.broadcastValue = res.hide;
                for (let k = 0; k < this.wifiSettingForm.broadcastOptions.length; k++) {
                    if (res.hide == this.wifiSettingForm.broadcastOptions[k].value) {
                        this.wifiSettingForm.broadcastLabel = this.wifiSettingForm.broadcastOptions[k].label;
                        break;
                    }
                }

                // 如果安全协议 Security Type 的 value：none，label：OPEN，就隐藏WIFI密码
                if (this.wifiSettingForm.securityTypeValue !== 'none') {
                    this.wifiSettingForm.wifiPasswordShow = true;
                }

                // 获取 WIFI Channel 下拉选项
                this.fetchChannel = res.channels;

                console.log("channel list",res.channels);
                // 格式化获取 WIFI channel 下拉框选项的节点，用于页面显示
                this.channelDataHandle(this.wifiSettingForm.channelWidthValue,res.channels);
                this.getChannelWidthOptions(res.channels, this.wifiModeDict.WIFI24);

                // 最大连接数
                this.wifiSettingForm.maxsta = res.maxsta;
                this.wifiSettingForm.maxstaOptions = this.getMaxstaOptions(res.defmax);


            } catch (error) {
                console.log(error);
            }
        },

        getMaxstaOptions(maxlink) {
            let options = [];
            for (let i = 1; i <= maxlink; i++) {
                options.push({
                    label: i,
                    value: i
                });
            }
            return options;
        },
        /**
         * get WIFI 5g config
         */
        async fetchWifi_5g() {
            try { 
                const res = await getInfoWireless('5');
                console.log("getWifiConfig:",res);
                // 获取auto WIFI信道值
                if (res.current_channel) {
                    this.wifiSettingForm.autoWifiChannel_5G = res.current_channel;
                }

                // 获取 WIFI Channel 下拉选项
                this.fetchChannel5G = res.channels;

                // 获取 WIFI 开关
                this.wifiSwitchValue_5G = res.enable;

                // 获取 WIFI 名称和密码
                this.wifiSettingForm.wifiName_5G = res.ssid;
                this.wifiSettingForm.wifiPassword_5G = res.key;

                // 获取 Security Type安全协议类型
                this.wifiSettingForm.securityTypeValue_5G = res.encryption;

                if (this.wifiSettingForm.securityTypeValue_5G == 'none') {
                    this.wifiSettingForm.wifiPasswordShow_5G = false;
                }

                // 获取 Security Type 安全协议类型的 label
                for (let k = 0; k < this.wifiSettingForm.securityTypeOptions.length; k++) {
                    if (this.wifiSettingForm.securityTypeValue_5G == this.wifiSettingForm.securityTypeOptions[k].value) {
                        this.wifiSettingForm.securityTypeLabel_5G = this.wifiSettingForm.securityTypeOptions[k].label;
                        break;
                    }
                }

                // 获取 Channel Width Value
                this.wifiSettingForm.channelWidthValue_5G = res.bandwidth;

                // 获取 WIFI Channel 的值
                this.wifiSettingForm.wifiChannelValue_5G = res.channel;

                // 获取 Broadcast Value 广播值： 0 or 1
                this.wifiSettingForm.broadcastValue_5G = res.hide;
                for (let k = 0; k < this.wifiSettingForm.broadcastOptions.length; k++) {
                    if (res.hide_ssid == this.wifiSettingForm.broadcastOptions[k].value) {
                        this.wifiSettingForm.broadcastLabel_5G = this.wifiSettingForm.broadcastOptions[k].label;
                        break;
                    }
                }

                // 如果安全协议 Security Type 的 value：none，label：OPEN，就隐藏WIFI密码
                if (this.wifiSettingForm.securityTypeValue_5G !== 'none') {
                    this.wifiSettingForm.wifiPasswordShow_5G = true;
                }

                console.log("channel list 5G",res.channels);

                // 格式化获取 WIFI channel 下拉框选项的节点，用于页面显示
                this.channelDataHandle(this.wifiSettingForm.channelWidthValue_5G,res.channels, this.wifiModeDict.WIFI5);
                this.getChannelWidthOptions(res.channels, this.wifiModeDict.WIFI5);

                // 最大连接数
                this.wifiSettingForm.maxsta_5G = res.maxsta;
                this.wifiSettingForm.maxstaOptions_5G = this.getMaxstaOptions(res.defmax);

            } catch (error) {
                console.log(error);
            }
        },

        /**
         * initialized data
         */
        async init() {

            if (this.supportWifiArr[0]) await this.fetchWifi_24g();

            if (this.supportWifiArr[1]) await this.fetchWifi_5g();

            // if (this.supportWifiArr[2]) await this.fetchWifi_6g();

            this.fetchWifiMainSwitch();
            this.loadFlag = true;
        },

        // 获取wifi总开关状态
        fetchWifiMainSwitch() {
            this.wifiMainSwitch = this.wifiSwitchValue && this.wifiSwitchValue_5G;
        }
    }
};
</script>
<style scoped lang="less">
@import '@/assets/css/theme_blue/component_common.less';
@import '@/assets/css/theme_blue/component_round.less';

.my-eye-hide,
.my-eye-reveal {
    margin-left: 0;
    margin-top: 0;
}
</style>
